<template>

    <div class="container" style="border-radius: 30px"  >
      <div style="border-radius: 150px;margin-top: 50px;width: 600px;height: 500px">
    <el-steps :active="data.active" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>

    </el-steps>

    <div v-if="data.active === 0">
      <el-input v-model="data.username" style=" opacity:0.5" placeholder="请输入你的用户名"></el-input>
      <el-button @click="nextStep" style="margin-top: 12px;">确定</el-button>
    </div>

    <div v-else-if="data.active === 1">
      <el-input v-model="data.email" placeholder="请输入邮箱" style=" opacity:0.5"></el-input>

      <el-input v-model="data.code" placeholder="请输入验证码" style="width: 240px; opacity:0.5"></el-input>
      <el-button style="width: 140px;border-radius: 30px" type="success"  @click="sendEmail">发送验证码</el-button>
      <el-input v-model="data.password" placeholder="请输入新密码" style="opacity:0.5"></el-input>
      <el-button @click="changePassword" style="margin-top: 12px;">修改密码</el-button>

    </div>



    <el-button v-if="data.active !== 2 " style="margin-top: 12px;" @click="prevStep">上一步</el-button>
    <el-button v-if="canGoToNextStep()" style="margin-top: 12px;" @click="nextStep">下一步</el-button>
  </div>
    </div>
</template>

<script>

export default {
  name:'ResetPassword',
  data() {
    return {
      data:{
        active: 0,

        username: '',
        email: '',
        code: '',
        password: '',
        userMail: '',
      }
    };
  },
  methods: {
    sendEmail() {
      // 获取要发送的邮箱地址
      const email = this.data.email;

      console.log(this.data.email+"=============="+this.data.userMail)
      if(this.data.email!==this.data.userMail)
      {
        this.$notify.error({
          title: '错误',
          message: '邮箱输入错误'
        });
        return;
      }
      if(!email){

        this.$notify.error({
          title: '错误',
          message: '邮箱地址不能为空'
        });
        return
      }


      // 使用Axios发送请求到后台
      axios.post('http://localhost:8082/user/sendMail', { email})
          .then(response => {
            console.log("=========================",JSON.stringify(response.data))
            if(response.data.code===200) {
              this.$notify({
                title: '成功',
                message: '邮箱发送成功',
                type: 'success'
              });
            }
            else if(response.data.code===500){
              this.$notify({
                title: '警告',
                message: response.data.msg,
                type: 'warning'
              });
            }

            // 处理响应，例如显示成功消息
            console.log('Email sent successfully');
          })
          .catch(error => {
            // 处理错误，例如显示错误消息
            console.error('Failed to send email:', error);
          });
    },
    canGoToNextStep() {
      if (this.active === 0 && !this.username) {
        return false;
      } else if (this.active === 1 && (!this.email || !this.verificationCode)) {
        return false;
      } else if (this.active === 2 && !this.newPassword) {
        return false;
      }

      return true;
    },
    nextStep() {

      if (this.canGoToNextStep()) {
        let _this=this;
        console.log(this.data.username)
        axios.post('http://localhost:8082/user/verifyUsername?username='+_this.data.username).then(rep=>{
          if(rep.data.code===200){
            _this.data.userMail=rep.data.data;

            this.data.active++;
          }
          if(rep.data.code===500){
            this.$notify.error({
              title: '错误',
              message: rep.data.msg,
            });
          }
        })

      }
    },
    prevStep() {
      if (this.data.active >= 1) {
        this.data.active--;
      }
    },
    changePassword() {

      axios.post('http://localhost:8082/user/updatePasswordByEmail',this.data).then(rep=>{

        if(rep.data.code===200) {
          this.$notify({
            title: '成功',
            message: '密码更改成功',
            type: 'success'
          });
          this.$router.push('/login');
        }
        else if(rep.data.code===500){
          this.$notify.error({
            title: '错误',
            message: rep.data.msg,
          });
        }

      })

    },
  }
};
</script>
<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(to bottom, #6394f8, #62d8aa);
  /*background-image: url('@/assets/register.jpg');*/
  background-size: cover;
  background-position: center;
}
</style>